<template>
	<div class="content_box">
		<van-swipe :autoplay="3000">
			<van-swipe-item v-for="(item,index) in banner_src" :key="index">
				<img class="swipe" :src="item.imageUrl" />
			</van-swipe-item>
		</van-swipe>
		<div class="content">
			<h3 class="recommand_title">推荐歌单</h3>
			<div class="remd_songs">
				<div class="remd_ul">
					<div class="remd_li" v-for="(item,index) in remd_list" :key="index" @click="skip_to_albumDetail(item)">
						<div class="remd_img">
							<img :src="item.picUrl" alt="">
							<div class="remd_lnum"><i class="iconfont icon-V"></i>{{item.playCount | formatTime}}</div>
						</div>
						<div class="remd_text">{{item.name}}</div>
					</div>
				</div>
			</div>
			<h3 class="remd_tl">最新音乐</h3>
			<newest_music :song_name="item.name" :artists_name="item.song.artists" :album_name="item.song.album.name" :song_id="item.id"
			:picUrl='item.picUrl' :id_list='id_list' :idx="index" v-for="(item,index) in result" :key='index'></newest_music>
		</div>
	</div>



</template>

<script>
	import {
		get_banner,
		get_remd_list,
	} from "../../API/recommend.js";
	import newest_music from './Recommand/newest_music.vue';
	import {
		get_remd_newsong
	} from '../../API/recommend.js';

	export default {
		data() {
			return {
				banner_src: [],
				remd_list: [],
				result: [],

			};
		},
		created() {
			get_banner().then((res) => {
				this.banner_src = res.data.banners;
			})
			get_remd_list().then(res => {
				this.remd_list = res.data.result;
			})
			get_remd_newsong().then(res => {
				this.result = res.data.result;
			})
		},
		filters: {
			formatTime(value) {
				value = value / 10000;
				if (value >= 10000) {
					return (value / 10000).toFixed(1) + '亿';
				} else {
					return value.toFixed(1) + '万';
				}
			}
		},
		components: {
			newest_music,
		},
		methods: {
			skip_to_albumDetail(item) {
				this.$router.push({
					name: 'Album',
					params: {
						id: item.id,
					}
				})
			}
		},
		computed: {
			// 使用计算属性来筛选出新歌榜 的所有 id 集合
			id_list() {
				return this.result.map(el => {
					return el.id;
				})
			}
		}
	}
</script>


<style lang="scss" scoped="">
	.content_box {
		padding-top: 124px;

		.my-swipe .van-swipe-item {
			color: #fff;
			font-size: 20px;
			line-height: 150px;
			text-align: center;
			background-color: #39a9ed;
		}

		.swipe {
			width: 100%;
		}

		.content {
			padding-top: 20px;

			.recommand_title {
				position: relative;
				text-align: left;
				text-indent: 6px;
				padding-left: 9px;
				font-size: 14px;
				margin-bottom: 14px;
			}

			.recommand_title::before {
				content: "";
				width: 2px;
				height: 100%;
				background-color: red;
				position: absolute;
				top: 0;
				left: 0px;
			}

			.remd_songs {
				padding-bottom: 24px;

				.remd_ul {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					font-size: 0;

					.remd_li {
						width: 32.3%;
						margin-bottom: 16px;

						.remd_img {
							position: relative;

							img {
								width: 100%;
								height: 100%;
							}

							.remd_lnum {
								position: absolute;
								right: 5px;
								top: 2px;
								z-index: 3;
								// padding-left: 13px;
								font-size: 12px;
								color: #fff;
								font-family: "microsoft yahei";

								.icon-V {}

							}
						}

						.remd_img::after {
							content: "";
							position: absolute;
							left: 0;
							top: 0;
							width: 100%;
							height: 20px;
							z-index: 2;
							background-image: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0));

						}

						.remd_text {
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							font-size: 13px;
							text-align: left;
							padding: 6px 2px 0 6px;
						}
					}
				}
			}

		}
	}

	.remd_tl {
		position: relative;
		text-align: left;
		text-indent: 6px;
		padding-left: 9px;
		font-size: 14px;
		margin-bottom: 14px;
	}

	.remd_tl:after {
		
		content: "";
		width: 2px;
		height: 100%;
		background-color: red;
		position: absolute;
		top: 0;
		left: 0px;
	}
</style>
